<template>
  <el-card>
    <div class="components-container">
      <aside><h1>新建流程表单</h1></aside>
      <div>
        <h3>表单标题:</h3>
        <el-input
          v-model="saveFormData.title"
          placeholder="请输入表单标题"
          style="margin-bottom: 15px"
        ></el-input>
        <tinymce v-model="content" :height="300" />
      </div>
      <br /><br /><br />
      <hr />
      <div><h1>生成流程表单效果:</h1></div>
      <h3 style="margin-bottom: 10px">{{ saveFormData.title }}</h3>
      <div class="editor-content" v-html="content" />
    </div>

    <el-button class="editButton" @click="postUnform">选择节点执行人</el-button>
    <el-button class="browserButton" @click="sendForm">发送</el-button>
    <el-dialog
      title="选择节点执行人"
      :visible.sync="selectManagerVisible"
      width="60%"
    >
      <el-table
        :data="
          pageData.filter(
            (data) =>
              !queryInfo.key ||
              data.name.toLowerCase().includes(queryInfo.key.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="所属单位" prop="departmentVo.unit.name">
        </el-table-column>
        <el-table-column label="所属部门" prop="departmentVo.departmentName">
        </el-table-column>

        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="queryInfo.key"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="browserButton"
              @click="handleEdit(scope.$index, scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="deleteButton" @click="selectManagerVisible = false"
          >取 消</el-button
        >
        <el-button class="browserButton" @click="selectManagerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { saveUnform,getFormById } from "@/api/form";
import { getTokenManager, pageManager } from "@/api/managers";
import { getToken } from "@/utils/auth";

export default {
  name: "TinymceDemo",
  components: { Tinymce },
  data() {
    return {
      content: null,
      saveFormData: {
        id: null,
        title: "",
        body: "",
        userId: null,
        creditId: null,
        status: 1,
      },
      creditId: null,
      currentPage: 1,
      size: 10,
      queryInfo: {
        key: null,
      },
      selectManagerVisible: false,
      pageData: [],
    };
  },
  created() {
    this.getCreditId();
    if(this.$route.query.id){
      getFormById(this.$route.query.id).then(res=>{
        this.content = res.data.capForm.body;
        this.saveFormData = res.data.capForm;
      })
    }
  },
  methods: {
    postUnform() {
      this.saveFormData.body = this.content;
      this.selectManagerVisible = true;
      this.pageManager(this.currentPage, this.size);
    },

    sendForm() {
      console.log(this.saveFormData);
      this.saveFormData.creditId = this.creditId;
      if (this.saveFormData.title === "" || this.saveFormData.userId === null) {
        this.$message.warning("请写表单标题或者选择节点执行人!");
        return;
      }
      saveUnform(this.saveFormData)
        .then((res) => {
          this.$message.success("发送流程表单成功!");
        })
        .catch((res) => {
          console.log(res);
          this.$message.error("发送表单失败，请检查日志");
        });
    },

    getCreditId() {
      getTokenManager(getToken()).then((res) => {
        this.creditId = res.data.userInfo.id;
      });
    },

    handleEdit(index, row) {
      this.saveFormData.userId = row.id;
      this.selectManagerVisible = false;
    },

    pageManager(current, limit) {
      if (current < 1) {
        return;
      }
      if (this.queryInfo.key != null) {
        // console.log("aaaa");
        let name = this.queryInfo.key;
        pageManager(current, limit, name).then((res) => {
          this.pageData = res.data.list;
          this.total = res.data.count;
          if (res.data.list.length === 0)
            this.pageManager(--this.currentPage, this.size);
          this.loading = false;
        });
      } else {
        pageManager(current, limit).then((res) => {
          this.pageData = res.data.list;
          this.total = res.data.count;
          if (res.data.list.length === 0)
            this.pageManager(--this.currentPage, this.size);
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style scoped>
.editor-content {
  margin-top: 20px;
}
.components-container {
  margin: 10px;
}
</style>

